<template>
  <view class="points-record flexc">
    <!-- <view class="page-head-bg-box">
			<image :src="getAssets('@/static/static-online/my/my-bg.png')" mode=""></image>
		</view> -->
    <view class="page-header">
      <u-navbar
        :fixed="true"
        :placeholder="true"
        title="积分卡"
        bgColor="transparent"
        :autoBack="true"
        :titleStyle="{ color: '#fff' }"
        :leftIconColor="'#fff'"></u-navbar>

      <view class="data-panel">
        <view class="title">积分余额</view>
        <view class="total">
          <text class="huobi"></text>
          <text class="money">
            {{ vuex_user.jifen || "0.00" }}
          </text>
        </view>
        <view class="info-items flex-between">
          <view class="info-item flex-between">
            <view class="label">积分总和</view>
            <view class="value">
              {{ vuex_user.costJifen || "0.00" }}
            </view>
          </view>
          <view class="info-line"></view>
          <view class="info-item flex-between">
            <view class="label">累积使用</view>
            <view class="value">
              {{ vuex_user.costJifen - vuex_user.jifen || "0.00" }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-sticky :offset-top="is_env_mp ? sticky_top : 44" customNavHeight="0">
      <view class="page-tabs">
        <view class="page-tabs-inner">
          <u-tabs
            :current="tabCurrent"
            :scrollable="false"
            :list="tabList"
            keyName="title"
            lineColor="#FFFFFF"
            :lineWidth="28"
            :lineHeight="2"
            @click="tabClick"
            :itemStyle="{ height: '40px', fontSize: '24rpx', color: '#9695A3' }"
            :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
            :inactiveStyle="{}"></u-tabs>
        </view>
      </view>
    </u-sticky>
    <view class="flex1 over">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="page-ctx">
          <view class="record-list">
            <view
              class="record-item flex-between"
              v-for="(item, index) in records"
              :key="index">
              <view class="info-box">
                <view class="title">
                  {{ item.remark }}
                </view>
                <view class="date-box">
                  <text class="type">
                    {{ item.logType == 1 ? "增加" : "使用" }}
                  </text>
                  <text class="date">{{ item.createdTime }}</text>
                </view>
              </view>
              <view class="value-box">
                <view
                  class="value"
                  :class="item.logType == 1 ? 'plus' : 'minus'">
                  <text class="value-marker">
                    {{ item.logType == 1 ? "+" : "-" }}
                  </text>
                  {{ item.jifen }}
                </view>
                <!-- <view class="yue">余额：{{ item.yue }}</view> -->
              </view>
            </view>
          </view>

          <view class="load-more-box" style="margin-top: 50rpx">
            <u-loadmore :status="loadmore_status" @loadmore="loadMore" />
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="cz-btn">
      <view class="" @click="() => (show = true)">扫码给予</view>
    </view>

    <u-popup
      :show="show"
      :round="10"
      mode="center"
      @close="() => (show = false)">
      <view class="pop-wrap">
        <view class="pop-t">给予积分</view>
        <view class="pop-box">
          <input type="number" v-model="num" placeholder="请填写给予积分数量" />
        </view>
        <view class="pop-btn flex-between">
          <view class="">取消</view>
          <view class="" @click="toRoute('/refund-submit-success')">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: "",
      show: false,
      sticky_top: 92, //
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent
      tabCurrent: 0,
      tabSelect: {
        title: "全部",
        value: 0,
      },
      tabList: [
        {
          title: "全部",
          value: 0,
        },
        {
          title: "增加",
          value: 1,
        },
        {
          title: "使用",
          value: 2,
        },
      ],

      //
      current_value: 0, //当前
      total_value: 0, //总和
      used_value: 0, //累计使用
      //
      records: [
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
        {
          remark: "111",
          jifen: 120,
        },
      ],
      count: 0,
      pagination: {
        page: 1,
        pageNum: 10,
      },
      loadmore_status: "loadmore", //loadmore  / loading / nomore
      //
    };
  },
  onLoad() {
    // #ifdef MP
    let native_menu_rect = uni.getMenuButtonBoundingClientRect();
    console.log("胶囊按钮", native_menu_rect);
    this.native_menu_bottom = native_menu_rect.bottom;
    this.sticky_top = this.native_menu_bottom + 6; //44 - 30
    // #endif

    this.setView();
  },

  onShow() {
    this.query_current();
  },

  onReachBottom() {
    this.loadMore();
  },

  onPageScroll(e) {
    console.log("滚动e", e);

    let percent = e.scrollTop / 50;
    if (percent > 1) {
      percent = 1;
    }
    this.headBackground = `rgba(255,255,255,${percent})`;
    this.showSearchBorder = e.scrollTop >= 30;
  },

  onPullDownRefresh() {
    this.initQuery();
    this.setView();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },

  methods: {
    loadMore() {
      if (this.loadmore_status == "loadmore") {
        this.loadmore_status = "loading";
        this.pagination.page++;
        this.query_records();
      }
    },
    initQuery() {
      this.records = [];
      this.pagination.page = 1;
      this.loadmore_status = "loadmore";
    },
    setView() {
      this.query_records();
    },

    query_records() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "jiFen_lists",
          ...this.pagination,
          type: this.tabSelect.value, //	0全部 1收入 2 支出
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.count = data.count;
          let list = data.list;
          this.records = this.records.concat(list);
          this.loadmore_status =
            this.count > this.records.length ? "loadmore" : "nomore";

          //
          // this.current_value = res.money
          // this.total_value = res.total_jifen
          // this.used_value = res.used_jifen
        }
      });
    },

    query_current() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_jifenInfo",
          ...this.pagination,
          type: this.tabSelect.value, //类型(0所有 1消费 2收入 3提现)
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.current_value = data.total_jifen; //总积分
          this.total_value = data.total_earn; //累计获得积分
          this.used_value = data.total_cost; //累计使用积分
        }
      });
    },

    tabClick(item) {
      this.tabSelect = item;
      this.initQuery();
      this.setView();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-popup {
  flex: 0 !important;
}
.page-header {
  background: linear-gradient(to bottom, #f49c0d 98%, #f7f7f7 100%);
}
.points-record {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  .cz-btn {
    padding: 8upx 32upx 0;
    & > view {
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      width: 100%;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

.page-head-bg-box {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 562rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.data-panel {
  position: relative;
  z-index: 2;
  padding: 32rpx;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
  }

  .total {
    margin-top: 16rpx;

    .huobi {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #fff;
    }

    .money {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 56rpx;
      color: #fff;
    }
  }

  .info-items {
    margin-top: 32rpx;

    .info-item {
      flex: 1;
      overflow: hidden;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #fff;
      }

      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #fff;
      }
    }

    .info-line {
      width: 2rpx;
      height: 24rpx;
      background: #fff;
      margin: 0 20rpx;
    }
  }
}

.page-tabs {
  padding: 16rpx 32rpx;
  background: #f6f6f6;
  .page-tabs-inner {
    height: 80rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
}

.page-ctx {
  padding: 24rpx 32rpx;
  position: relative;
  z-index: 2;
  background: #f6f6f6;
}

.record-list {
  .record-item {
    margin-bottom: 24rpx;
    padding: 24rpx;
    min-height: 142rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;

    .info-box {
      flex: 1;
      overflow: hidden;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }

      .date-box {
        margin-top: 8rpx;

        .type {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #000000;
        }

        .date {
          margin-left: 20rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #000000;
        }
      }
    }

    .value-box {
      .value {
        text-align: right;
        font-family: PingFang SC, PingFang SC;
        font-size: 24rpx;
        color: #000000;

        .value-marker {
          margin-right: 10rpx;
        }
        &.plus {
          color: #f49c0d;
        }
        &.minus {
          color: #ef2d30;
        }
      }

      .yue {
        margin-top: 12rpx;
        text-align: right;
        font-family: PingFang SC, PingFang SC;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
}

.page-foot {
  .btn {
    width: 100%;
    height: 80rpx;
    background: #cb0011;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
  }
}
.pop-wrap {
  width: 686rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  box-sizing: border-box;
  padding: 58upx 24upx 0;
  .pop-t {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 42upx;
    text-align: center;
  }
  .pop-box {
    width: 100%;
    height: 64rpx;
    background: #f6f6f6;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    box-sizing: border-box;
    padding: 0 24upx;
    margin-bottom: 64upx;
    & > input {
      width: 100%;
      height: 100%;
      font-size: 24rpx;
    }
  }
  .pop-btn {
    & > view {
      width: 306rpx;
      height: 80rpx;
      background: #f6f6f6;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #000000;
    }
    & > view:nth-of-type(2) {
      background: #f49c0d;
      color: #ffffff;
    }
  }
}
</style>
